/**
  *@ClassName SelectCustomTime
  *@Description TODO
  *@Author wangming
  *@Date 2020-03-17 11:29
  *@Version 1.0
**/

<template>
  <div style="width: 100%;display: inline-block">
    <a-dropdown v-show="selectType" v-model="selectOpen" :trigger="['click']">
      <a-input readOnly :value="defaultValue" allowClear @change="changeValue"/>
      <div slot="overlay" class="custom_div">
        <h2>快捷时段</h2>
        <h4 class="custom_h4_first">最近时段</h4>
        <a-row>
          <a-col :span="8" v-for="(item,i) in recentTime" class="custom_col"><a @click="selectTime(item)">{{item}}</a></a-col>
        </a-row>
        <h4 class="custom_h4">相对时段</h4>
        <a-row>
          <a-col :span="8" v-for="(item,i) in relativeTime" class="custom_col"><a @click="selectTime(item)">{{item}}</a></a-col>
        </a-row>
        <a class="custom_h3" @click="changeType(false)">自定义时间</a>
      </div>
    </a-dropdown>
    <a-range-picker v-show="!selectType" showTime :open="dateOpen" @ok="confirmRangePicker" @openChange="openChange" style="width: 100%">
      <template slot="renderExtraFooter">
        <a @click="changeType(true)">快捷时段</a>
      </template>
    </a-range-picker>
  </div>
</template>

<script>
  import moment from 'moment';

  export default {
    name: "select-custom-time",
    props: {
      defaultValue: {
        type: String,
        default: ""
      }
    },
    components: {

    },
    data() {
      return {
        selectType: true,
        selectOpen: false,
        value: this.defaultValue,
        recentTime:["5分钟内","10分钟内","20分钟内","30分钟内","1小时内","2小时内","6小时内","1天内","2天内"],
        relativeTime:["今天","昨天","本周","上周","本月","上月"],
        dateOpen: false
      }
    },
    methods:{
      selectTime(item){
        this.value = item;
        this.selectOpen = false;
        this.$emit('selectTime',item,"type");
      },
      confirmRangePicker(dates){
        this.dateOpen = false;
        this.selectType = true;
        this.value = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss') + " - " + moment(dates[1]).format('YYYY-MM-DD HH:mm:ss');
        this.$emit('selectTime',dates,"time");
      },
      changeType(flag){
        this.selectType = flag;
        if(flag){
          this.dateOpen = false;
          this.selectOpen = true;
        }else{
          this.selectOpen = false;
          this.dateOpen = true;
        }
      },
      openChange(status){
        this.dateOpen = status;
        if(!status){
          this.selectType = true;
        }
      },
      changeValue(e){
        this.value = e.target.value;
      }
    }
  }
</script>

<style scoped lang="less">
  .custom_div{
    width: 500px;
    padding: 10px;
    background-color: white;
    box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
  }

  .custom_col {
    margin: 5px 0;
  }

  .custom_h4_first {
    color: rgba(0,0,0,.28);
  }

  .custom_h4 {
    margin-top: 5px;
    color: rgba(0,0,0,.28);
  }

  .custom_h3{
    display: inline-block;
    margin-top: 10px;
  }
</style>
